<template>
  <Layout :class="'bg-white p-2'">
    <h1>预约试听列表</h1>
    <Row :class="'m-1'">
      <!--表头-->
      <Input :class="'w-25 m-2'" v-model="des" placeholder="请输入回访情况" />
      <Input
        :class="'w-25 m-2'"
        v-model="result"
        placeholder="请输入回访结果"
      />
      <Input
        :class="'w-25 m-2'"
        v-model="method"
        placeholder="请输入回访方式"
      />
      <Input :class="'w-25 m-2'" v-model="autor" placeholder="请输入跟进人" />
      <Input :class="'w-25 m-2'" v-model="cu" placeholder="请输入添加人" />
      <Input
        :class="'w-25 m-2'"
        v-model="source"
        placeholder="请输入线索来源"
      />
      <Input :class="'w-25 m-2'" v-model="name" placeholder="请输入学生姓名" />
      <Input :class="'w-25 m-2'" v-model="tel" placeholder="请输入联系电话" />
    </Row>
    <Row>
      &nbsp;&nbsp;&nbsp;接待时间区间
    </Row>
    <Row :class="'m-1'">
      <Col span="12">
        &nbsp;&nbsp;<DatePicker
          :class="'w-20'"
          type="date"
          v-model="interviewDate1"
          format="yyyy-MM-dd"
          placement="bottom-end"
          placeholder="接待时间日期"
          style="width: 200px"
        ></DatePicker>
      </Col>
      <Col span="12">
        &nbsp;&nbsp;<DatePicker
          :class="'w-20'"
          type="date"
          v-model="interviewDate2"
          format="yyyy-MM-dd"
          placement="bottom-end"
          placeholder="接待时间时刻"
          style="width: 200px"
        ></DatePicker>
      </Col>
    </Row>
    <Row :class="'m-1'">
      <Col span="12">
        &nbsp;&nbsp;<TimePicker
          :class="'w-20 '"
          type="time"
          v-model="interviewClock1"
          format="HH:mm:ss"
          placeholder="接待时间日期"
          style="width: 168px"
        ></TimePicker>
      </Col>
      <Col span="12">
        &nbsp;&nbsp;<TimePicker
          :class="'w-20 '"
          type="time"
          v-model="interviewClock2"
          format="HH:mm:ss"
          placeholder="接待时间时刻"
          style="width: 168px"
        ></TimePicker>
      </Col>
      <br />
      <!--查询按钮-->
      <Button
        class="m-2"
        type="primary"
        shape="circle"
        @click="search"
        icon="ios-search"
        >查询</Button
      >
    </Row>
    <Layout :class="'bg-white'">
      <Table
        border
        :class="'m-1'"
        :columns="tableInfo.columnInfo"
        :data="tableInfo.data"
      >
        <template slot-scope="{ row, index }" slot="status">
          <span v-if="row.statu">开</span>
          <span v-else>关</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Row>
            <Col>
              <Menu>
                <Submenu name="1">
                  <template slot="title">
                    <Icon type="ios-paper" />
                    操作选项
                  </template>
                  <Button type="error" size="small" @click="remove()"
                    >删除</Button
                  >
                  <br />
                  <Button
                    type="primary"
                    size="small"
                    style="margin-right: 5px"
                    @click="show(row)"
                    >详细</Button
                  >
                  <br />
                  <Button type="error" @click="newReservationTry(row)"
                    >新增预约试听记录</Button
                  >
                </Submenu>
              </Menu>
            </Col>
          </Row>
        </template>
      </Table>
      <!--分页-->
      <Page
        :class="'m-2 text-right'"
        :page-size="tableInfo.pageSize"
        @on-change="pageSearch"
        :total="tableInfo.total"
      />
    </Layout>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
      des: '',
      result: '',
      method: '',
      autor: null,
      cu: null,
      source: '',
      name: '',
      tel: '',
      interviewClock1: '',
      interviewClock2: '',
      interviewDate1: '',
      interviewDate2: '',
      tableInfo: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
        columnInfo: [
          //表头-----------------------------------
          {
            title: '学生编号',
            key: 'studentId',
          },
          {
            title: '预约试听时间',
            key: 'datetime',
          },
          {
            title: '接待人',
            key: 'autor',
          },

          {
            title: '操作',
            slot: 'action',
            width: 150,
          },
        ],
        data: [],
      },
    }
  },
  methods: {
    init: function() {
      this.$data.tableInfo.currentPage = 0
      this.search()
    },
    newReservationTry: function(row) {
      this.$router.push({
        name: 'reservationTry_new', //跳转至XX新增页面
        params: {
          row,
        },
      })
    },
    show: function(pId) {
      this.$router.push({
        name: 'reservationTry_detail', //跳转至XX详细页面
        params: {},
      })
    },
    pageSearch: function(changedPage) {
      this.$data.tableInfo.currentPage = changedPage
      this.search()
    },
    remove: function(pId) {
      this.message.confirm({
        title: '删除提示',
        content: '即将删除权限，确定吗？',
        onOk: () => {
          this.http
            .delete({
              url: '/backview/delete', //删除url 待定......
              param: {},
            })
            .then((data) => {
              this.search()
            })
        },
        onCancel: () => {
          this.message.info('操作已取消')
        },
      })
    },
    formatDate: function(date) {
      //格式化日期方法!
      var d = new Date(date),
        month = '' + (d.getMonth() + 1),
        day = '' + d.getDate(),
        year = d.getFullYear()

      if (month.length < 2) month = '0' + month
      if (day.length < 2) day = '0' + day

      return [year, month, day].join('-')
    },
  }, //method
  created: function() {
    this.init()
  },
}
</script>

<style></style>
